<template>
  <div class="Input">
    <h1>管理员设置</h1>姓名:
    <!-- <el-input v-model="input" ></el-input> -->
    <input type="text" v-model="input" placeholder="请输入名字" >
    <br />手机:
    <!-- <el-input v-model="input" ></el-input> -->
    <input type="text" v-model="input" placeholder="请输入手机号" >
    <br />地址:
    <!-- <el-input v-model="input" placeholder="请输入地址"></el-input> -->
    <input type="text" v-model="input" placeholder="请输入地址" >
    <div class="div">权限配置</div>

    <div>
      <span class="span">成员管理:</span>    
      <el-checkbox
        class="quanbu"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox> <br />
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
        <span class="span">成员订单中心:</span>
        <el-radio class="quanbu" v-model="radio" label="2">备选项</el-radio>
    </div> <br /> 

    <div>
      <span class="span">内容管理:</span>    
      <el-checkbox
        class="quanbu"
        :indeterminate="isIndeterminate1"
        v-model="checkAll1"
        @change="handleCheckAllChange1"
      >全选</el-checkbox> <br />
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
        <el-checkbox v-for="city1 in cities1" :label="city1" :key="city1">{{city1}}</el-checkbox>
      </el-checkbox-group>
    </div>

    <div>
      <span class="span">后台管理:</span>    
      <el-checkbox
        class="quanbu"
        :indeterminate="isIndeterminate2"
        v-model="checkAll2"
        @change="handleCheckAllChange2"
      >全选</el-checkbox> <br />
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
        <el-checkbox v-for="city2 in cities2" :label="city2" :key="city2">{{city2}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button type="primary">确定</el-button>
  </div>
</template>
<script>
    const cityOptions = ['主持人管理', '婚庆公司管理', '新人管理'];
    const cityOptions1 = ['banner管理', '底部文案', '关于团队介绍文案','合作伙伴管理','加入团队文案','首页推荐管理'];
    const cityOptions2 = ['管理员配置', '主持人等级设置','管理费记录'];
    export default {
        data() {
      return {
        checkAll: false,
        checkAll1: false,
        checkAll2: false,
        checkedCities: ['', '',''],
        checkedCities1: ['', '',''],
        checkedCities2: ['', '',''],
        cities: cityOptions,
        cities1: cityOptions1,
        cities2: cityOptions2,
        isIndeterminate: false
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckAllChange1(val) {
        this.checkedCities1 = val ? cityOptions1 : [];
        this.isIndeterminate1 = false;
      },
      handleCheckAllChange2(val) {
        this.checkedCities2 = val ? cityOptions2 : [];
        this.isIndeterminate2 = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>
<style scoped>
div{
    margin:20px;
}
.Input {
  width: 500px;
  height: 700px;
  border: 1px solid rgb(136, 135, 135);
  margin: 50px auto;
  text-align: center;
}
h1 {
  font-size: 30px;
}
input {
  width: 370px;
  height:30px;
  text-indent: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border:1px solid #eee;
  border-radius: 5px;
}
.div {
  width: 460px;
  height: 25px;
  color: #000;
  font-size: 15px;
  padding-left: 15px;
  padding-top: 5px;
  text-align: left;
  margin: 10px auto;
  background: rgb(197, 196, 196);
}
.quanbu,.span{
    float: left;
}
.span{
    margin-right:10px;
}
</style>